<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="90px"
          id="form"
        >
          <el-form-item label="用户：" prop="nickname">
            <el-input
              v-model.trim="form.nickname"
              placeholder="名称/编码/手机/联系人"
              clearable
              class="wid220"
            ></el-input>
          </el-form-item>
          <el-form-item label="分组：" prop="group_id">
            <el-select
              v-model.trim="form.group_id"
              placeholder="分组"
              class="wid220"
              @change="getArticleList"
            >
              <el-option label="所有" value=""></el-option>
              <el-option
                v-for="(group, index) in list.group"
                :key="index"
                :label="group"
                :value="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态：" prop="status">
            <el-select
              v-model.trim="form.status"
              placeholder="状态"
              class="wid220"
              @change="getArticleList"
            >
              <el-option label="所有" value=""></el-option>
              <el-option label="禁用" :value="1"></el-option>
              <el-option label="正常" :value="2"></el-option>
              <el-option label="审核" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <MainFormBtn @reset="reset" @getSearchFor="getSearchFor" :loading="listLoading" :showBtn="moredata">
          </MainFormBtn>
          <div class="more el-form-item" @click="more">
            <span>更多</span>
            <i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
          </div>
          <div class="clearfix"></div>
          <el-collapse-transition>
            <div v-show="moredata">
              <el-form-item label="业务员：" prop="salesman_id">
                <el-select
                  v-model.trim="form.salesman_id"
                  placeholder="业务员"
                  class="wid220"
                  @change="getArticleList"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option
                    v-for="(salesman, index) in list.salesman"
                    :key="index"
                    :label="salesman"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="区域：" prop="region_id">
                <el-select
                  v-model.trim="form.region_id"
                  placeholder="区域"
                  class="wid220"
                  @change="getArticleList"
                  filterable
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option
                    v-for="(region, index) in list.region"
                    :key="index"
                    :label="region"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="注册时间：" prop="createTime">
                <el-date-picker
                  v-model="createTime"
                  type="daterange"
                  class="time220"
                  @change="getArticleList"
                  :editable="false"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                  :picker-options="pickerOptions"
                />
              </el-form-item>
              <el-form-item label="支付方式：" prop="pay_type">
                <el-select
                  v-model.trim="form.pay_type"
                  placeholder="支付方式"
                  class="wid220"
                  @change="getArticleList"
                >
                  <el-option label="所有" value=""></el-option>

                  <el-option label="货到付款" :value="1"></el-option>
                  <el-option label="在线支付" :value="2"></el-option
                  ><el-option label="全部" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <div class="clearfix"></div>
              <el-form-item label="时间账期：" prop="overdue_status">
                <el-select
                  v-model.trim="form.overdue_status"
                  placeholder="时间账期"
                  class="wid220"
                  @change="getArticleList"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option label="正常" :value="1"></el-option>
                  <el-option label="提醒" :value="2"></el-option>
                  <el-option label="逾期" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="信用金：" prop="credit_status">
                <el-select
                  v-model.trim="form.credit_status"
                  placeholder="信用金"
                  class="wid220"
                  @change="getArticleList"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option label="正常" :value="1"></el-option>
                  <el-option label="提醒" :value="2"></el-option>
                  <el-option label="超额" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="子账号：" prop="child_name">
                <el-input
                  v-model.trim="form.child_name"
                  placeholder="手机/名称"
                  clearable
                  class="wid220"
                ></el-input>
              </el-form-item>
              <div class="clearfix"></div>
                <el-form-item label=" ">
                  <MainFormBtn class="btn-bottom" @reset="reset" @getSearchFor="getSearchFor" :loading="listLoading" :showBtn="!moredata">
                  </MainFormBtn>
                </el-form-item>
            </div>
          </el-collapse-transition>
        </el-form>
      </div>
      <div class="main-controls-wrap">
        <div>
          <router-link to="/user/list/add" class="mainor_tea mg-r-6">创建用户</router-link>
          <el-button @click="exportb" class="mg-r-6"
            >导出<el-tooltip class="item" effect="dark" placement="bottom">
              <div slot="content">
                注释：默认导出全部，也可勾选导出你想要的数据
              </div>
              <svg
                aria-hidden="true"
                class="navbar_svg new_navbar_svg"
                width="14"
                height="14"
              >
                <use xlink:href="#icon-summary_question" />
              </svg> </el-tooltip
          ></el-button>
          <el-button @click="importDialog">导入</el-button>
        </div>
      </div>
      <div class="main_table" :style="{ height: borderHeight - 6 + 'px' }">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list.list.data"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
          :row-class-name="getRowClass"
          @selection-change="handleSelectionChange"
          :height="borderHeight - 6"
          :header-cell-class-name="this.$verticaline"
          :header-cell-style="tableHeightStyle"
          @header-dragend="changeTableWidth"
        >
          <!-- <el-table-column type="expand" class-name="main_hei">
              <template slot-scope="props">
                <el-table
                  :data="props.row.sub_account"
                  class="mainex_ta"
                  fit
                  :highlight-current-row="false"
                >
                  <el-table-column label width="40" align="right" />
                  <el-table-column label="名称" prop="nickname" width="300" />
                  <el-table-column label="手机" prop="mobile" width="300" />
                  <el-table-column
                    label="联系人"
                    prop="address.name"
                    width="300"
                  />
                  <el-table-column label="收货地址" width="300">
                    <template slot-scope="scope">{{
                      scope.row.address ? scope.row.address.address : ""
                    }}</template>
                  </el-table-column>
                  <el-table-column
                    label="状态"
                    prop="status"
                    width="300"
                    class-name="main_hei"
                  >
                    <template slot-scope="scope">{{
                      scope.row.status == 1 ? "正常" : "禁用"
                    }}</template>
                  </el-table-column>
                  <el-table-column label prop width="100" />
                </el-table>
              </template>
            </el-table-column> -->

          <el-table-column type="selection" />
          <div v-for="(field, index) in list.field" :key="index">
            <el-table-column
              label="用户名称"
              prop="nickname"
              :show-overflow-tooltip="true"
              :width="tableWidth[hash+'nickname']"
              v-if="field == 1"
            >
              <template slot-scope="scope">
                <div>
                  <div class="user_cell_cox">
                    <div>
                      <el-popover
                        v-show="scope.row.labels.length > 0"
                        placement="bottom-start"
                        width="200"
                        trigger="hover"
                      >
                        <div class="item-label">
                          <span v-for="item in scope.row.labels" :key="item">
                            {{ labels[item] }}
                          </span>
                        </div>

                        <img
                          slot="reference"
                          class="label-pic"
                          src="../../assets/images/10.png"
                        />
                      </el-popover>
                    </div>
                    <span>{{ scope.row.nickname }}</span>
                  </div>
                  <!-- <span>{{ scope.row.nickname }}</span> -->
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="手机"
              prop="mobile"
              :show-overflow-tooltip="true"
              :width="tableWidth[hash+'mobile']"
              v-if="field == 2"
            />
            <el-table-column
              label="编码"
              prop="info.code"
              :show-overflow-tooltip="true"
              :width="tableWidth[hash+'info.code']"
              v-if="field == 3"
            />
            <el-table-column
              label="联系人"
              prop="address.name"
              :show-overflow-tooltip="true"
              :width="tableWidth[hash+'address.name']"
              v-if="field == 4"
            />
            <el-table-column
              label="收货手机"
              prop="address.mobile"
              :show-overflow-tooltip="true"
              :width="tableWidth[hash+'address.mobile']"
              v-if="field == 5"
            />
            <el-table-column
              label="收货地址"
              prop="address.address_name"
              :show-overflow-tooltip="true"
              v-if="field == 6"
              :width="tableWidth[hash+'address.address_name']"
            >
              <template slot-scope="scope">{{
                scope.row.address ? scope.row.address.address_name : ""
              }}</template>
            </el-table-column>
            <el-table-column
              label="业务员"
              :show-overflow-tooltip="true"
              v-if="field == 7"
              prop="salesman_name"
              :width="tableWidth[hash+'salesman_name']"
            >
              <template slot-scope="scope">
                {{
                  scope.row.info
                    ? scope.row.info.salesman
                      ? scope.row.info.salesman.name
                      : ""
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              label="用户分组"
              prop="info.group.title"
              :show-overflow-tooltip="true"
              v-if="field == 8"
              :width="tableWidth[hash+'info.group.title']"
            />
            <el-table-column
              label="区域"
              prop="info.region.title"
              :show-overflow-tooltip="true"
              v-if="field == 9"
              :width="tableWidth[hash+'info.region.title']"
            />
            <el-table-column
              label="支付方式"
              prop="pay_type"
              :show-overflow-tooltip="true"
              v-if="field == 10"
              :width="tableWidth[hash+'pay_type']"
            >
              <template slot-scope="scope">{{
                scope.row.pay_type_document
              }}</template>
            </el-table-column>
            <el-table-column
              label="时间账期"
              prop="overdue_status"
              :show-overflow-tooltip="true"
              v-if="field == 11"
              :width="tableWidth[hash+'overdue_status']"
            >
              <template slot-scope="scope">{{
                scope.row.info
                  ? scope.row.info.overdue_status + 1 == 1
                    ? "正常"
                    : scope.row.info.overdue_status + 1 == 2
                    ? "提醒"
                    : "逾期"
                  : ""
              }}</template>
            </el-table-column>
            <el-table-column
              label="信用金"
              prop="credit_deposit"
              :show-overflow-tooltip="true"
              v-if="field == 12"
              :width="tableWidth[hash+'credit_deposit']"
            >
              <template slot-scope="scope">{{
                scope.row.info
                  ? scope.row.info.credit_status + 1 == 1
                    ? "正常"
                    : scope.row.info.credit_status + 1 == 2
                    ? "提醒"
                    : "超额"
                  : ""
              }}</template>
            </el-table-column>

            <el-table-column
              label="状态"
              prop="status"
              :width="tableWidth[hash+'status']"
              :show-overflow-tooltip="true"
              :render-header="renderHeader2"
              v-if="field == 13"
            >
              <template slot-scope="scope">
                <div class="main_link">
                  <el-link type="info" v-if="scope.row.status == 0">禁用</el-link>
                  <el-link type="success" v-else-if="scope.row.status == 1"
                    >正常</el-link
                  >
                  <el-link type="danger" v-else>审核</el-link>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="注册日期"
              prop="created_at"
              :show-overflow-tooltip="true"
              v-if="field == 14"
              :width="tableWidth[hash+'created_at']"
            >
              <template slot-scope="scope">{{
                parseTime(scope.row.created_at, "{y}-{m}-{d}")
              }}</template>
            </el-table-column>
            <el-table-column
              label="积分"
              prop="credit_status"
              :show-overflow-tooltip="true"
              v-if="field == 15"
              :width="tableWidth[hash+'credit_status'] || 100"
            >
              <template slot-scope="scope">{{
                scope.row.info ? scope.row.info.points : ""
              }}</template>
            </el-table-column>
          </div>
          <el-table-column
            label="管理操作"
            align="center"
            fixed="right"
            prop="operate"
            :width="tableWidth[hash+'operate'] || 200"
            class-name="main_hei"
          >
            <template slot="header">
              <table-header-setting
                @openHeader="dialogFormVisible = true"
              ></table-header-setting>
            </template>
            <template slot-scope="scope">
              <router-link :to="'/user/list/edit/' + scope.row.id">
                <el-link type="primary">编辑</el-link>
              </router-link>
              <el-link type="danger" @click="delet(scope.$index, scope.row.id)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_num boxdq mg-t-10">
        <div class="main_num_l box">
          <p>
            正常：
            <em>{{ list.normal }}</em>
          </p>
          <p>
            审核中：
            <em>{{ list.verify }}</em>
          </p>
          <p>
            禁用：
            <em>{{ list.forbidden }}</em>
          </p>
          <p>
            小计：
            <em>{{ list.subtotal }}</em>
          </p>
          <p>
            回收站：
            <em>{{ list.recycle }}</em>
          </p>
          <p>
            用户总量：
            <em>{{ list.all }}</em>
          </p>
        </div>
        <!-- 分页 -->
        <div class="main_page_r">
          <MainPagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>
    <el-dialog
      title="表头设置"
      :visible.sync="dialogFormVisible"
      class="main_dialog dialog500"
      @close="type = list.field"
    >
      <div class="set_sort">
        <div class="set_none_show">
          <el-checkbox-group v-model="type">
            <el-checkbox
              v-for="(Header, index) in Header"
              :key="index"
              :label="Header.id"
              :disabled="Header.disabled"
              >{{ Header.name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="set_header_sort">
          <div class="set_sort_ab">
            <draggable chosen-class="chosen" v-model="Header" animation="500">
              <transition-group>
                <li
                  class="set_sort_ab_border"
                  v-for="item in Header"
                  :key="item.id"
                >
                  <div>
                    <span class="el-icon-d-caret"></span>
                    <span>{{ item.name }}</span>
                  </div>
                  <svg-icon icon-class="index_move" />
                </li>
              </transition-group>
            </draggable>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setupmine" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 订单导入 -->
    <el-dialog
      title="用户导入"
      :visible.sync="importbuVisible"
      class="main_dialog dialog700 importbu"
    >
      <div class="dialog_padding20_30">
        <div class="importbu_p">
          <h3>导入说明：</h3>
          <p>1.注意使用红色字体标注的必填字段,不填或错填将导致导入失败。</p>
          <p>2.导入文件仅支持xlsx格式,大小不超过2M ,数据不超过2000行。</p>
          <p>3.导入文件不能包含“合并单元格”，否则无法导入。</p>
          <p>
            4.导入时碰到数据不正确的行，系统会跳过错误的行继续执行未完成的行。
          </p>
        </div>
        <div class="importbu_in">
          <h3>数据行区间设置</h3>
          <div class="box">
            <p>
              <span>第一个数据行号：</span
              ><el-input-number
                v-model="import_form.start_line_num"
                controls-position="right"
                :min="2"
              ></el-input-number>
            </p>
            <p>
              <span>最后一行数据行数：</span
              ><el-input
                v-model="import_form.end_line_num"
                placeholder="默认为全部"
                type="number"
              ></el-input>
            </p>
          </div>
        </div>
        <div class="importbu_an box">
          <el-button class="marginRight10" @click="downTemplate"
            >下载模板</el-button
          >
          <el-upload
            class="upload-demo"
            :action="user_import"
            :on-success="importSuccess"
            :on-error="importerr"
            :show-file-list="false"
            :headers="{
              Authorization: getToken(),
            }"
            :data="import_params"
          >
            <el-button size="small" type="primary" @click="handleUpload"
              >点击上传</el-button
            >
          </el-upload>

          <p v-if="import_file_name ? true : false">
            上传文件名：{{ import_file_name }}
          </p>
        </div>
        <div class="import_process" v-if="percentShow">
          <div class="progress">
            <el-progress
              :text-inside="true"
              :stroke-width="20"
              :percentage="percent"
              color="#19B098"
            ></el-progress>
          </div>
          <div class="notice" v-if="percentShow">
            <div class="importtips">
              <p class="success" v-if="percent == 100">用户导入结束</p>
              <div v-for="(item, index) in reverseSum" :key="index">
                <p v-if="item.type == 2" :key="index" class="fail">
                  {{ item.name }}，导入失败
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="cancelDisabled" @click="importbuVisible = false"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mixins } from "@/mixins/index.js";
import {
  member_index,
  member_delete,
  user_export,
  user_import_model,
} from "@/api/user/user";
import { field_getField } from "@/api/sort";
import { field_save, user_import } from "@/api/currency";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import dateOption from "@/options/dateOption";
import { parseTime, exportMethod } from "@/utils/index";
import { userListHeader } from "@/options/headerSet.js";
import { mapGetters } from "vuex";
import draggable from "vuedraggable";
export default {
  mixins: [mixins],
  components: {
    draggable,
  },
  directives: {
    // 聚焦元素
    focus: {
      inserted(el) {
        el.querySelector("input").focus();
      },
    },
  },
  data() {
    return {
      user_import: user_import,
      // 时间
      parseTime,
      exportMethod,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 搜索
      form: {
        nickname: "",
        group_id: null,
        status: null,
        salesman_id: null,
        region_id: null,
        pay_type: null,
        start_time: "",
        end_time: "",
        credit_status: null,
        overdue_status: null,
        child_name: "",
      },
      createTime: [],
      pickerOptions: dateOption,
      // 更多
      moredata: false,
      // 列表数据
      list: {
        list: {
          data: [],
        },
      },
      labels: {},
      listLoading: false,
      // 全选
      selectArr: [],
      // 表头设置
      dialogFormVisible: false,
      type: [],
      Header: userListHeader,
      // 焦点
      offsetParent: true,
      // 订单导入
      importbuVisible: false,
      import_form: {
        user_type: 1,
        goods_type: 1,
        start_line_num: 2,
        end_line_num: "",
      },
      import_file_name: "",
      import_params: {
        string: "",
      },
      percent_gs: 0,
      percent: 0,
      percentShow: false,
      percent_list: [],
      importArrLength: 1,
      cancelDisabled: false,
    };
  },
  computed: {
    ...mapGetters(["avatar"]),
    reverseSum() {
      return this.percent_list;
    },
  },
  // 刷新
  inject: ["reload"],
  created() {
    this.getNumerical(190);
    this.sort_data();
  },
  mounted() {
    window.Echo.channel("batchImportUser." + this.avatar.company_id).listen(
      "BathImportUserEvent",
      (e) => {
        this.cancelDisabled = true;
        this.importArrLength = e.notice.count;
        this.percentShow = true;
        if (e.notice.errcode == 0) {
          this.percent_list.push({
            num: this.percent,
            type: 1,
            name: e.notice.msg,
          });
        } else if (e.notice.errcode == 100) {
          this.percent_list.push({
            num: this.percent,
            type: 2,
            name: e.notice.msg,
          });
        }
        this.percent_gs = parseInt(this.percent_gs) + 1;
        if ((this.percent_gs / this.importArrLength) * 100 >= 100) {
          this.percent = 100;
          this.cancelDisabled = false;
          return;
        }
        this.percent =
          this.percent_gs / this.importArrLength
            ? parseInt((this.percent_gs / this.importArrLength) * 100)
            : 0;
      }
    );
  },
  methods: {
    reset() {
      this.$refs['userListFrom'].resetFields();
      this.createTime = [];
      this.sort_data();
    },
    getSearchFor() {
      this.getArticleList();
    },
    startGetting() {
      this.getArticleList();
    },
    //排序
    sort_data() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: 3 }
      );
      field_getField(data).then((res) => {
        let arry = JSON.parse(res.data.info.sort);
        if (arry) {
          this.Header.sort((a, b) => {
            return arry.indexOf(a.id) - arry.indexOf(b.id);
          });
        }
      });
    },
    // 判断表格是否有子项，无子项不显示展开按钮
    getRowClass(row) {
      if (row.row.sub_account) {
        if (row.row.sub_account.length === 0) {
          return "row-expand-cover";
        }
      }
    },
    // 下载模板
    downTemplate() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      const notify = this.$notify.info({
        title: "开始导出...",
        type: "success",
        duration: 0,
      });
      user_import_model(data).then((res) => {
        this.exportMethod(res, "用户导入模板", notify);
      });
    },
    // 导入订单
    importDialog() {
      this.import_file_name = "";
      this.percent_gs = 0;
      this.percent = 0;
      this.percentShow = false;
      this.percent_list = [];
      this.importArrLength = 1;
      this.cancelDisabled = false;
      this.importbuVisible = true;
    },

    importerr(err, file, fileList) {
      this.$message.error("上传失败");
    },
    importSuccess(response, file, fileList) {
      if (response.errcode != 0) {
        this.$message.error(response.errmsg);
        return;
      }
      this.import_file_name = file.name;
    },
    handleUpload() {
      this.import_params.string =
        this.import_form.start_line_num + "," + this.import_form.end_line_num;
    },
    // 导出
    exportb() {
      let form = {};
      if (this.selectArr.length > 0) {
        form.ids = this.selectArr.join(",");
      } else {
        // let idarr = [];
        // this.list.list.data.forEach((item) => {
        //   idarr.push(item.id);
        // });
        form.ids = "";
      }
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      const notify = this.$notify.info({
        title: "开始导出...",
        type: "success",
        duration: 0,
      });
      user_export(data)
        .then((res) => {
          this.exportMethod(res, "用户列表", notify);
        })
        .catch((err) => {
          this.$message.error("导出失败");
        });
    },
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = [];
      val.map((item) => {
        this.selectArr.push(item.id);
      });
    },
    // 状态？注释
    renderHeader2(h, { column, $index }) {
      // 这里在最外层插入一个div标签
      return h("div", [
        // h即为cerateElement的简写
        // 在div里面插入span
        h("span", {
          // 表示内容
          domProps: {
            innerHTML: column.label,
          },
          on: {
            click: () => {
              console.log(`${column.label}   ${$index}`);
            },
          },
        }),
        h(
          "el-tooltip",
          {
            // 表示属性
            attrs: {
              effect: "dark",
              content: "未审核的用户，不能登录！",
              placement: "top",
            },
          },
          [
            h("i", {
              style: "margin-left: 5px;margin-top:-1px;",
              class: "el-icon-question table-msg",
            }),
          ]
        ),
      ]);
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.member_index();
    },
    // 更多
    more() {
      this.moredata = !this.moredata;
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.member_index();
    },
    changePage(page) {
      this.current.page = page;
      this.member_index();
    },
    // 设置确认
    setupmine(val) {
      let arry = [];
      let arryes = [];
      this.Header.map((e) => {
        arryes.push(e.id);
        this.type.map((p) => {
          if (e.id == p) {
            arry.push(e.id);
            return;
          }
        });
      });
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { type: 3 })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: 3, fields: JSON.stringify(arry), sort: JSON.stringify(arryes) }
      );
      field_save(data).then((res) => {
        if (res.errcode == 0) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.reload();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 删除
    delet(index, id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: id, type: 1 })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id, type: 1 }
      );
      this.$confirm("是否删除用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          member_delete(data).then((res) => {
            if (res.errcode == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.list.list.data.splice(index, 1);
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },
    // 列表
    member_index() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, this.list_form(), this.current)
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.list_form(),
        this.current
      );
      member_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          res.data.list.data.map((e) => {
            e.is_look = e.is_look == 0 ? false : true;
            e.freight_yf = false;
            // if (!e.address.address_name) {
            // 	e.address.address_name = "";
            // }
          });

          this.type = res.data.field;
          this.labels = res.data.labels;
          res.data.list.data.map((e) => {
            e.pay_type_document = "";
            e.labels = [];
            if (e.info && e.info.labels) {
              e.labels = e.info.labels.split(",");
            }
            // 筛选--开始
            let arr2 = [];
            let labels_ids = [];
            if (this.labels) {
              labels_ids = Object.keys(this.labels);
            }
            labels_ids.filter((item) => {
              e.labels.includes(item) && arr2.push(item);
            });
            e.labels = arr2;
            // 结束

            if (e.info) {
              switch (e.info.pay_type) {
                case 0:
                  e.pay_type_document = "货到付款";
                  break;
                case 1:
                  e.pay_type_document = "在线支付";
                  break;
                case 2:
                  e.pay_type_document = "全部";
                  break;
              }
            }
          });
          this.list = res.data;
          this.totalCount = res.data.list.total;
           // 在数据更新后执行
          this.$nextTick(() => {
            // myTable是表格的ref属性值
            if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) {
              this.$refs.multipleTable.doLayout();
            }
          });
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.start_time = this.createTime[0] ? this.createTime[0] : "";
      form.end_time = this.createTime[1] ? this.createTime[1] : "";
      return form;
    },
  },
  activated() {
    if (this.$route.params.status) {
      let status = this.$route.params.status;
      this.form.status = status;
    }
    // 列表
    this.member_index();
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.maincl {
  .main_table /deep/.el-table--small td {
    padding: 10px 0;
  }
  .main_table /deep/.el-table--small th {
    padding: 10px 0;
  }
/deep/.el-table__body tr.current-row > td.el-table__cell,
.el-table__body tr.selection-row > td.el-table__cell {
  background: none;
}
  // /deep/.el-table {
  //   tr {
  //     &:hover {
  //       background: none !important;
  //     }
  //     &.hover-row > td {
  //       background: none !important;
  //     }
  //     .current-row > td {
  //       background: none !important;
  //     }
  //   }
  // }
  // /deep/.el-table .el-table__body tr:hover {
  //   background: #fff !important;
  // }
  // /deep/.el-table .el-table__body tr:hover > td {
  //   background: #fff !important;
  // }
  // /deep/.el-table tr.expanded + tr {
  //   background: #fafafa !important;
  // }
  // /deep/.el-table tr.expanded + tr > td {
  //   background: #fafafa !important;
  // }
  // /deep/.el-table tr.expanded + tr .mainex_ta {
  //   background: #fafafa !important;
  // }
  // /deep/.el-table tr.expanded + tr .mainex_ta th,
  // /deep/.el-table tr.expanded + tr .mainex_ta tr {
  //   background: #fafafa !important;
  // }
  // /deep/.el-table tr.expanded + tr:hover {
  //   background: #fafafa !important;
  // }
  // /deep/.el-table tr.expanded + tr:hover > td {
  //   background: #fafafa !important;
  // }
  // /deep/.el-table tr.expanded + tr .el-table tr:hover {
  //   background: #fafafa !important;
  // }
  // /deep/.el-table tr.expanded + tr .el-table tr:hover > td {
  //   background: #fafafa !important;
  // }
}
.new_navbar_svg {
  vertical-align: top;
  margin-left: 5px;
  use {
    fill: #606266;
  }
}

// 导入进度条
.import_process {
  width: 100%;
}

.progress {
  padding: 15px 40px 15px 0;
}
.notice {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-right: 40px;
  .importtips {
    overflow-y: auto;
    width: 100%;
    height: 84px;
    height: 84px;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    padding: 10px 15px;
    .fail {
      color: #ff5a5a;
      line-height: 1.2;
      font-size: 12px;
    }
    .success {
      color: #19b098;
      line-height: 1.2;
      font-size: 12px;
    }
  }
}
.importbu_in {
  /deep/ .el-input__inner {
    padding-right: 0;
  }
}
.user_cell_cox {
  display: flex;
  align-items: center;
}
.label-pic {
  width: 16px;
  height: 20px;
  margin-right: 6px;
  margin-top: 2px;
}
.item-label {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item-label span {
  height: auto;
  padding: 4px 10px;
  border: 1px solid #e6a23c;
  color: #e6a23c;
  margin-bottom: 5px;
  border-radius: 3px;
  margin-right: 10px;
}
/deep/.el-dialog__body {
  padding: 0;
}
/deep/.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
}
/deep/.el-checkbox {
  flex: 30%;
}
/deep/ .el-form-item--small.el-form-item {
  margin-bottom: 10px !important;
}
</style>
